<template>
<div class="w">
			
			
				<header class="navs">
					<div class="nav-left">
						<img src="/../static/logo.png" >
						
					</div>
					<div class="nav-right">
						<span class="nav-right-top">
							2021年5月27日 星期一 anydi 欢迎您！
						</span>
						<div class="nav-right-btn">
							<span class="el-icon-warning-outline">
								退出
							</span>
						</div>
						
					</div>
				</header>
				<tbody>
				<div class="coner-nav">
					<ul>
						<li v-for="(item,index) in  isNav" @click="isClick(index)" :key="index" :class="{curren : curren=== index}">{{item}}</li>
					</ul>
				</div>
				<div class="coner">
					<div class="coner-left">
						<ul>
							<li><a href="#" class="el-icon-s-unfold"></a></li>
							<li><a href="#" ><i class="el-icon-menu"></i></a></li>
							<li style="background-color: #20b2aa;"><a href="#" class="el-icon-folder"></a></li>
							<li><a href="#" class="el-icon-takeaway-box"></a></li>
							<li><a href="#" class="el-icon-present"></a></li>
							<li><a href="#" class="el-icon-position"></a></li>
							<li><a href="#" class="el-icon-location"></a></li>
							<li><a href="#" class="el-icon-unlock"></a></li>
						</ul>
						
					</div>


					<div>
						<div class="coner-box"  v-show="currentTab==0" >11111</div>
						<div class="coner-box" v-show="currentTab==1" >22222</div>
					<div class="coner-box" v-show="currentTab==2">
						<div class="coner-box-header">
							<span style="font-weight: 700;margin-left: 10px;">当前位置:</span> <span>行业监管-企业档案-涉能单位分组</span>
						</div>
						<div class="coner-box-body">
							<div class="coner-box-left">
								<div class="coner-box-left-header gg">
								<h6>涉能单位分组管理</h6>
								</div>
                <div class="coner-box-left-body">
					<div class="body-left">
					<el-input size="mini" placeholder="请输入查询单位分组名称" v-model="input3" class="input-with-select" suffix-icon="el-icon-search">
						 </el-input>
						 <el-tree :data="data"  style=" margin-top: 10px;  padding: 5px;" highlight-:current="true"   :accordion="true" icon-class="el-icon-folder-opened" ></el-tree>
					</div>
					<div class="body-right">
						<div class="body-right-top">
							<div>
								<span class="ss">单位名称：</span><el-input size="mini" v-model="input3" placeholder="请输入单位名称" style="width: 120px;"></el-input>
							<span class="ss">所在区域：</span>
							<el-autocomplete popper-class="my-autocomplete" size="mini" style="width: 50px;">
							<i class="el-icon-bottom el-input__icon" slot="suffix">   	
                            </i>
                            </el-autocomplete>
							<span class="ss">所属行业：</span>
							<el-autocomplete popper-class="my-autocomplete" size="mini" style="width: 50px;">
							<i class="el-icon-bottom el-input__icon" slot="suffix">   	
                            </i>
                            </el-autocomplete>
							<span class="ss">经营状态：</span>
							<el-autocomplete popper-class="my-autocomplete" size="mini" style="width: 50px;">
							<i class="el-icon-bottom el-input__icon" slot="suffix">   	
                            </i>
                            </el-autocomplete>
							<el-button type="primary" icon="el-icon-search" round size="medium" style="margin-left: 115px; background-color: #008080;">查询</el-button>	
						 
							</div>
							<div style="margin: 20px 0 0 311px	">
							<span class="ss">单位名称：</span><el-input size="mini" v-model="input3" placeholder="请输入新建的单位分组" style="width: 180px;"></el-input>
							<el-button type="primary" icon="el-icon-plus" round size="medium" style=" background-color: #008080;">新建</el-button>
							<el-button type="primary" icon="el-icon-delete" round size="medium" style=" background-color: #008080;">删除</el-button>	
							
							</div>
						</div>
						<div class="body-right-end">
							<table  border="1" cellspacing="0" cellpadding="0">
       <thead>
            <tr>
                <td colspan="6">分组内单位</td>
            </tr>
            <tr >
                <td width="7%"> <input type="checkbox"></td>
                <td width="8%" >序号</td>
                <td width="29%">单位名称</td>
                <td width="19%">所在区域</td>
                <td width="19%">所属行业</td>
                <td width="18%" >经营状态</td>
            </tr>
       </thead>
        <tbody>
            <tr v-for="(item,index) in isShuJu" :key="index">
                <td> <input type="checkbox"></td>
                <td >{{item.id}}</td>
                <td >{{item.name}}</td>
                <td >{{item.quyu}}</td>
                <td >{{item.hy}}</td>    
                <td >{{item.zt}}</td>
            </tr>
            
            
        </tbody>
    </table>
	    <div class="img-box">
			<span>
				<img src="/../static/7.png" alt="">
			<img src="/../static/8.png" alt="">
			</span>
		</div>
	<table  border="1" cellspacing="0" cellpadding="0">
       <thead>
            <tr>
                <td colspan="6">分组内单位</td>
            </tr>
            <tr >
                <td width="7%"> <input type="checkbox"></td>
                <td width="8%" >序号</td>
                <td width="29%">单位名称</td>
                <td width="19%">所在区域</td>
                <td width="19%">所属行业</td>
                <td width="18%" >经营状态</td>
            </tr>
       </thead>
        <tbody>
            <tr v-for="(item,index) in isShuJu" :key="index">
                <td> <input type="checkbox"></td>
                <td >{{item.id}}</td>
                <td >{{item.name}}</td>
                <td >{{item.quyu}}</td>
                <td >{{item.hy}}</td>    
                <td >{{item.zt}}</td>
            </tr>
            
            
        </tbody>
     </table>
	 


					</div>
					<div class="a-a">
						<div class="end_tab">
		 <div class="end_left">共32条，每页显示 <select name="a" id="">
			  <option value="15" >15</option></select> 条</div>
		 <div class="end_right">
			 <i class="el-icon-arrow-left"></i>
			  <i class="el-icon-d-arrow-left"></i> 第 <input type="text" value="1" style="width: 20px;  text-align: center;"> 页,共 2 页
			   <i class="el-icon-d-arrow-right"></i>
			    <i class="el-icon-arrow-right"></i>
		 </div>
	             </div>		
				<div class="end_tab" style="margin-left: 50px;">
		 <div class="end_left">共32条，每页显示 <select name="a" id="">
			  <option value="15" >15</option></select> 条</div>
		 <div class="end_right">
			 <i class="el-icon-arrow-left"></i>
			  <i class="el-icon-d-arrow-left"></i> 第 <input type="text" value="1" style="width: 20px;  text-align: center;"> 页,共 2 页
			   <i class="el-icon-d-arrow-right"></i>
			    <i class="el-icon-arrow-right"></i>
		 </div>
	             </div>	
					</div>
					
					</div>
                </div>	
							</div>
							
							<div class="coner-box-right">
								<div class="coner-box-right-header gg">
									<h6>相关功能</h6>
								
								</div>
								<div class="right-body">
									<div class="right-body-a">
										<img src="/../static/2.png" alt="">
										<p>节能监察</p>
									</div>
									<div class="right-body-a">
										<img src="/../static/3.png" alt="">
										<p>节能监察</p>
									</div>
									<div class="right-body-a">
										<img src="/../static/4.png" alt="">
										<p>节能监察</p>
									</div>
									<div class="right-body-a">
                    
										<img src="/../static/5.png" alt="">
										<p>节能监察</p>
									</div>
									<div class="right-body-a">
										<img src="/../static/6.png" alt="">
										<p>节能监察</p>
									</div>
								</div>
								<div class="right-footer">
									<div class=" gg">
										<h6>功能说明</h6>
									
									</div>
									<div class="right-footer-end">
										<div class="end-a">
											<span>1.</span><span style="word-break:break-all;">新建单位分组时需填写分组名称。</span>

										</div>
										<div>
											<span>2.</span><span style="word-break:break-all;">选中涉能单位分组后，可在单位列表中勾选单位加入或移出分组，操作后系统自动保存变更。</span>
										</div>
										
									
									</div>
									

								</div>
								
							</div>
					</div>
									
					</div>
					<div class="coner-box" v-show="currentTab==3" >33333</div>
					<div class="coner-box" v-show="currentTab==4" >444444</div>
					<div class="coner-box" v-show="currentTab==5" >555555</div>
					</div>
					
					
				</div>
				</tbody>	
		</div>
  
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    isNav:['首页','在线监测','行业监控','预警预测','可视化分析','系统管理'],
		curren:2,
		input3: '',
		currentTab:2,
		isShuJu:[
                    {id:1,name:'',quyu:'漌州区',hy:'能源',zt:'在营'},
                    { id: 2, name: '', quyu: '海曙区', hy: '教育', zt: '注销' },
                    { id: 3, name: '', quyu: '江北区', hy: '文旅', zt: '撤销' },
                    { id: 4, name: '', quyu: '镇海区', hy: '卫健', zt: '' },
                    { id: 5, name: '', quyu: '奉化区', hy: '交通', zt: '' },
                    { id: 6, name: '', quyu: '宁海县', hy: '水利', zt: '' },
                    { id: 7, name: '', quyu: '象山县', hy: '住建', zt: '' },
                    { id: 8, name: '', quyu: '余姚市', hy: '公安机构', zt: '' },
                    { id: 9, name: '', quyu: '慈溪市', hy: '', zt: '' },
                    { id: 10, name: '', quyu: '', hy: '', zt: '' },
                    { id: 11, name: '', quyu: '', hy: '', zt: '' },
                    { id: 12, name: '', quyu: '', hy: '', zt: '' },
                    { id: 13, name: '', quyu: '', hy: '', zt: '' },
                    { id: 14, name: '', quyu: '', hy: '', zt: '' },
                    { id: 15, name: '', quyu: '', hy: '', zt: '' },
                    
                ],
		
	 data:[{
          label: '设计单位分组',
          children: [
            {label: '2021年上报省平台企业',children: [{
            label: '',
           
          }]},
			{label:'2021年双控考核企业',children: [{
            label: '',
           
          }]},
			{label:'28家供能企业',children: [{
            label: '',
           
          }]},
			{label:'2021年双控考核企业',children: [{
            label: '',
           
          }]},
			{label:'2021年双控考核企业',children: [{
            label: '',
           
          }]},
			{label:'2021年双控考核企业',children: [{
            label: '',
           
          }]},
			{label:'2021年双控考核企业',children: [{
            label: '',
           
          }]},

	         
           
			
          ],
        }],
		
	}
	
	
	
    
  },
 
  methods:{
	
		isClick(index){
			this.curren = index
			this.currentTab = index
		},
		
   
  },
 
    
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
*{
	margin: 0;
	padding: 0;
}
.a-a{
	width: 770px;
	height: 40px;
	display: flex;
	justify-content: space-between;	
     padding-top:10px;	
}
.end_tab{
	flex: 1;
	width: 360px;
	height: 40px;	
	display: flex;
	justify-content: space-between;	
	font-size: 10px;
	

}

.img-box{
	width: 50px;
	height: 450px;

}
.img-box img {
	margin-top: 50px;
     padding-top: 50px ;
	/* line-height: 450px; */
}
  table{
          width: 360px;
          height: 400px;
          text-align: center;
          border: 1px solid #d9d9d9;
      }
      table thead{
          background-color: #369c98;
          color: #fff;
          font-size: 12px;
      }
      table tbody{
          font-size: 12px;
      }
      table tbody tr:nth-child(2n){
          background-color: #ebf5f5;

      }



.ss{
	font-size: 12px;
}
li{
	list-style: none;
}
.w{
	width: 1205px;
	
	/* background-color: pink; */
	margin: 0 auto;
}

.navs{
	display: flex;
 justify-content:space-between;
	width: 1205px;
	
	background-color: #008080;
}

.nav-left img{
	
	height: 50px;
}
.nav-right{
	position: relative;
	display: flex;
	flex-direction:column;
	/* justify-content:flex-end; */
	margin-right: 10px;
	color: #fff;
	
}
.nav-right-top{
	padding: 5px;
	font-size: 12px;
}
.nav-right-btn{
	position: absolute;
	top: 29px;
	right: 0;
	height: 20px;
	width: 80px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
	
}
.coner-nav{
	
	width: 1205px;
	height: 30px;
	background-color: #20b2aa;
}
.coner-nav ul {
	display: flex;
}
.coner-nav ul li {
      cursor: pointer;
    margin-left: 35px;
	line-height: 30px;
	color: #fff;
	
}
.curren{
	background-color: #c9dbdb;
	color: #00706b !important;
	
}
.coner{
	display: flex;
	
}
.coner-left{
	width: 40px;
	height: 603px;
	background-color: #404040;
}
.coner-left a {
	text-decoration: none;
	font-size: 25px;
	margin-top: 10px;
	color: #fff;
	
}
.coner-left ul li {
	text-align: center;
}
.coner-box{
	flex: 1;
  background-color: #f0f2f4;
	
}
.coner-box-header{
	font-size: 12px;
	background-color: #f0f2f4;
}
.coner-box-body{
	display: flex;
	/* background-color: #FFFFFF; */
  margin-left: 8px;
  margin-right: 8px;
}

.coner-box-left{
	width: 984px;
	border: 1px solid #ccc;
	border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
}
.coner-box-left-body{
	display: flex;
	/* margin-top: 8px; */
}
.body-left{
	width: 200px;
	height: 545px;
	border: 1px solid #20b2aa;
	border-radius: 10px;
	margin: 5px;
}
 .el-input {
    width: 190px;

	margin: 5px;
     
	 border-radius: 30px

	
  }


.body-right{
	flex: 1;
	/* background-color: pink; */
	margin: 5px;
}
.body-right-top{
	
	height: 100px;
	background-color: #e5f1f1;
	border-radius: 10px;
}
.body-right-end{
	display: flex;
	
	height: 400px;
	
	margin-top: 5px;
}

.coner-box-right{
	width: 150px;
	height: 580px;
	margin-left: 10px;
	border: 1px solid #ccc;
		border-radius: 10px;
    background-color: #fff;
	
	
}
.gg{
	border-bottom: 2px solid #20b2aa ;
}

h6::before{
	content:url(~@/../static/1.png);
	margin-right: 8px;
	margin-left: 5px;
	vertical-align:middle;
  display:inline-block;
}
.right-body{
	display: flex;
	flex-wrap:wrap;
}
.right-body-a{
	width: 50%;
	height: 60px;
	margin-bottom: 10px;
}
.right-body-a img{
	width: 70px;
	height: 40px;
	
	max-height: 80px;
}
.right-body-a p{
	font-size: 12px;
	text-align: center;
}
.right-footer-end span{
	font-size: 12px;
	 padding: 5px ;
}
.end-a{
	margin-top: 8px;
}

</style>
